<template>
	<div class="content">
		<div class="tab_box">
			<u-tabs
				:list="list1" 
				@click="clickTab"
				:activeStyle="{
					color: '#23AC39',
					fontSize:'30rpx',
					fontWeight: 500
				}"
				:inactiveStyle="{
					color: '#999999',
					fontSize:'30rpx',
					fontWeight: 500
				}"
				lineColor="#23AC39"
			></u-tabs>
		</div>

		<div class="list_box" v-if="list.length">	
			<div class="list" v-for="(item,index) in list">
				<div class="name_box">
					<p class="label" v-if="item.type == 0">卖公司</p>
					<p class="label" v-if="item.type == 1">卖个体户</p>
					<p class="label" v-if="item.type == 2">卖代账户</p>
					<span>{{item.name}}</span>
				</div>
				<!-- 卖公司 -->
				<div class="msg" v-if="item.type == 0">
					<div>
						<p class="title">{{item.area}}</p>
						<p class="text">注册地</p>
					</div>
					<div>
						<p class="title">{{item.setTime}}</p>
						<p class="text">成立时间</p>
					</div>
					<div>
						<p class="title" v-if="item.taxCredit == 0">不确定</p>
						<p class="title" v-if="item.taxCredit == 1">A级</p>
						<p class="title" v-if="item.taxCredit == 2">B级</p>
						<p class="title" v-if="item.taxCredit == 3">M级</p>
						<p class="title" v-if="item.taxCredit == 4">C级</p>
						<p class="title" v-if="item.taxCredit == 5">D级</p>
						<p class="text">纳税等级</p>
					</div>
					<div>
						<p class="title" v-if="item.bankTatement == 0">不确定</p>
						<p class="title" v-if="item.bankTatement == 1">流水很多</p>
						<p class="title" v-if="item.bankTatement == 2">流水偏少</p>
						<p class="title" v-if="item.bankTatement == 3">连续流水</p>
						<p class="title" v-if="item.bankTatement == 4">无流水</p>
						<p class="text">流水情况</p>
					</div>
				</div>
				<!-- 卖个体户 -->
				<div class="msg" v-if="item.type == 1">
					<div>
						<p class="title">{{item.area}}</p>
						<p class="text">注册地</p>
					</div>
					<div>
						<p class="title">{{item.setTime}}</p>
						<p class="text">成立时间</p>
					</div>
					<div>
						<p class="title" v-if="item.taxationState == 0">未开业</p>
						<p class="title" v-if="item.taxationState == 1">小规模</p>
						<p class="title" v-if="item.taxationState == 2">一般纳税人</p>
						<p class="text">税务</p>
					</div>
					<div>
						<p class="title">{{item.bankAccount == 0?'未开户':'已开户'}}</p>
						<p class="text">银行</p>
					</div>
				</div>
				<!-- 卖代账户 -->
				<div class="msg" v-if="item.type == 2">
					<div style="width: 33%;">
						<p class="title">{{item.area}}</p>
						<p class="text">注册地</p>
					</div>
					<div style="width: 33%;">
						<p class="title">{{item.setTime}}</p>
						<p class="text">成立时间</p>
					</div>
					
					<div style="width: 33%;">
						<p class="title">{{item.proxyAccount}}</p>
						<p class="text">代账户数</p>
					</div>
				</div>
				<p class="text1">{{item.remark?item.remark:''}}</p>
				<div class="price_box">
					<p class="price">售价：
						<span v-if="item.price">{{item.price}}元</span>
						<span v-else>面议</span>
					</p>
					<p class="time">{{item.createTime}}</p>
				</div>

				<p class="reason" v-if="item.state == 2">驳回理由：{{item.reasons}}</p>
				<!-- <div class="newanniu" v-if="item.state == 2">
					<p @click="againSubmit(item.type,item.id)">重新提交</p>
				</div> -->
			</div>
		</div>
		<div class="no_data" v-else>
			<img src="/static/no-data.png" alt="">
			<p>暂无相关记录哦～</p>
		</div>

		<!-- <div class="anniu_box">
			<div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
				<p @click="toFabu">一手加入</p>
				<p @click="toCompensate">保证金</p>
			</div>
		</div> -->
		<p style="height: 30rpx;"></p>
	</div>
</template>

<script>
	import { mapState ,mapActions} from 'vuex'
	import Config from '@/config/index.js'
	import api from '@/api';
	import { formatDateYearMonth } from '@/utils/utils.js'
	export default {
		data() {
			return {
				list1: [{
                    name: '展示中(0)',
					status:1,
                },{
                    name: '审核中(0)',
					status:0,
                }, {
                    name: '下架中(0)',
					status:3,
                },{
                    name: '未通过(0)',
					status:2,
                }],
				tabIndex:0,
				list:[],
				param:{
					type:'',
					state:'1'
				},
			}
		},
		computed: {
			...mapState({
                token: state => state.user.token,
				userId:state => state.user.userId,
			})
		},
		onLoad() {
			this.getList()
		},
		onShow(){
			
		},
		methods: {

			clickTab(item){
				this.param.state = item.status
				this.tabIndex = item.index
				uni.vibrateShort();
				this.getList(true)
			},
			
			// 获取列表
			getList(){
				this.$showLoading('加载中...')
				this.param.userId = this.userId
				api.user.company_list_user(this.param).then(res=>{
					if(res.code == 200){
						uni.hideLoading();
						res.data.map(item=>{
							item.createTime = formatDateYearMonth(item.createTime)
						})
						this.list = res.data

						if(!this.tabIndex){
							this.list1[this.tabIndex].name = `展示中(${res.data.length})`
						}else if(this.tabIndex == 1){
							this.list1[this.tabIndex].name = `审核中(${res.data.length})`
						}else if(this.tabIndex == 2){
							this.list1[this.tabIndex].name = `下架中(${res.data.length})`
						}else{
							this.list1[this.tabIndex].name = `未通过(${res.data.length})`
						}
					}
				})
			},

			toFabu(){
				uni.navigateTo({
					url: '/pages/local/fabu/index'
				});
			},

			toCompensate(){
				uni.navigateTo({
					url: '/pages/compensate/index'
				});
			},

			// 重新提交
			againSubmit(type,id){
				let url = ''
				if(type == 0){// 卖公司
					url = `/pages/company/payGs/index?id=${id}`
				}
				if(type == 1){// 卖个体户
					url = `/pages/company/payGt/index?id=${id}`
				}
				if(type == 2){// 卖代账户
					url = `/pages/company/payDz/index?id=${id}`
				}
				uni.navigateTo({
					url
				});
			}
		},
		onReachBottom(){
			this.param.pageNo++
			this.getFbList()
		}
	}
</script>

<style lang="scss" scoped>
	@mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background: #F7F7F7;
		.tab_box{
			background: #fff;
			margin-bottom:20rpx;
			/deep/ .u-tabs__wrapper__nav__item{
				// justify-content: space-around;
				padding:0 30rpx;
			}
		}
		.list_box{
			margin: 0 30rpx;
			.list{
				padding:32rpx 24rpx;
				background: #fff;
				border-radius: 12rpx;
				margin-bottom:20rpx;
				.name_box{
					display: flex;
					align-items: center;
					.label{
						display: inline-block;
						font-size:24rpx;
						color:#fff;
						padding:4rpx 14rpx;
						background: #23AC39;
						border-radius: 16rpx 0 16rpx 0;
						margin-right:10rpx;
					}
					span{
						color: #333333;
						font-size: 30rpx;
						font-weight: 500;
					}
				}
				.msg{
					display: flex;
					justify-content: space-between;
					background: #F6F7F9;
					padding:32rpx 0;
					margin:24rpx 0;
					.title{
						color:#666666;
						font-size:30rpx;
					}
					.text{
						color:#999999;
						font-size:24rpx;
						margin-top:20rpx;
					}
					div{
						width: 25%;
						border-right:1px solid #EEEEEE;
						display: flex;
						flex-direction:column;
						align-items: center;
						&:last-child{
							border-right:none;
						}
					}
				}
				.text1{
					color: #333333;
					font-size: 28rpx;
				}
				.price_box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top:48rpx;
					.price{
						font-size: 28rpx;
						color:#FF463F;
						span{
							font-size:34rpx;
						}
					}
					.time{
						color: #999999;
						font-size: 26rpx;
					}
				}

				.reason{
					height: 80rpx;
					display: flex;
					align-items: center;
					border-top:1px solid #f1f1f1;
					font-size:28rpx;
					color:#999;
					margin-top:30rpx;
				}
				.newanniu{
					p{
						width: 180rpx;
						height: 70rpx;
						line-height: 70rpx;
						background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
						border-radius: 100rpx;
						text-align: center;
						color: #fff;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}
		}
		.anniu_box{
			width: 100%;
			height: 150rpx;
			.box{
				width: 92%;
				height: 150rpx;
				position: fixed;
				bottom:0;
				left: 0;
				padding:0 30rpx;
				z-index: 100;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
				p{
					width: 46%;
					height: 96rpx;
					line-height: 96rpx;
					background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
					border-radius: 100rpx;
					text-align: center;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
		.no_data{
			text-align: center;
			padding:50rpx 0;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
	}
</style>
